window.onload = function() {

    // localStorage.removeItem("historyMaxScore");
    
    var gameUI = document.querySelector('#gameUI');  // 游戏的UI界面
    var canvas = document.querySelector('canvas');
    var ctx = canvas.getContext('2d');
    var startbtn = document.querySelector("#start-button");  // 按钮-游戏开始
    var selectMode = document.querySelector("#select-mode");  // 按钮-游戏模式选择
    var normalMode = document.querySelector('#normal');  // 按钮-普通模式
    var speedMode = document.querySelector("#speed");  // 按钮-变速模式
    var change = false;  // 变速是否开启
    var lifeOfPlayer1 = 3;  // 玩家1的血条数
    var lifeOfPlayer2 = 3;  // 玩家2的血条数
    var lifeOfP1 = document.querySelector('#lifeOfPlayer1');  // 显示玩家1的血条
    var lifeOfP2 = document.querySelector('#lifeOfPlayer2'); // 显示玩家2的血条


    // 生成随机数的函数
    function random(min, max) {

        const num = Math.floor(Math.random() * (max - min)) + min;
        return num;

    }
32
    // 生成随机颜色
    function randomColor() {

        return 'rgb(' +
            random(0, 255) + ', ' +
            random(0, 255) + ', ' +
            random(0, 255) + ')';
            
    }


    /*
        定义一个绘图函数，每次使用一组不同的变量改变球体的位置；
        循环调用以保持画布上每一帧不断更新
    */
   
    // 构造函数：创建一个Ball类
    function Ball(x, y, dx, dy, ballRadius) {

        this.x = x;
        this.y = y;
        this.dx = dx;
        this.dy = dy;
        this.ballRadius = ballRadius;

        // 球的绘制
        this.drawBall = function() {

            ctx.beginPath();
            ctx.arc(this.x, this.y, this.ballRadius, 0, Math.PI * 2);
            ctx.fillStyle = randomColor();
            ctx.fill();
            ctx.closePath();

        }

        // 球的碰撞检测
        this.collision = function() {

            // 上下碰壁
            if(this.y + this.ballRadius > canvas.height || this.y - this.ballRadius < 0)
            {
                this.dy = -this.dy;
            }
            
            // 右碰壁
            if(this.x + this.ballRadius > canvas.width)
            {
                if(this.y  + this.ballRadius >= paddle2.y && this.y - this.ballRadius <= paddle2.y + paddle2.height)
                {
                    this.dx = -this.dx;

                    // 变速
                    if(change)
                    {
                        this.changeSpeed();
                    }
                }
                else
                {
                    // 如果玩家2没有防住，则玩家2的血条减一
                    lifeOfPlayer2--;
                    var heart = "";
                    for (var i = 1; i <= lifeOfPlayer2; i++)
                    {
                        heart += "♥";
                    }
                    lifeOfP2.innerHTML = heart;
                    // 血条归零，游戏结束，玩家1获胜
                    if(lifeOfPlayer2 == 0)
                    {
                        lifeOfP2.innerHTML = "";
                        clearInterval(running);
                        alert("Game Over. Player1 Win!!!");
                        document.location.reload();  // 重新加载该页面
                    }
                    // 血条还未归零，球继续反弹
                    this.dx = -this.dx;
                }
            }

            // 左碰壁
            if(this.x - this.ballRadius < 0)
            {
                if(this.y  + this.ballRadius >= paddle1.y && this.y - this.ballRadius <= paddle1.y + paddle1.height)
                {
                    this.dx = -this.dx;

                    // 变速
                    if(change)
                    {
                        this.changeSpeed();
                    }
                }
                else
                {
                    // 如果玩家1没有防住，则玩家1的血条减一
                    lifeOfPlayer1--;
                    var heart = "";
                    for (var i = 1; i <= lifeOfPlayer1; i++)
                    {
                        heart += "♥";
                    }
                    lifeOfP1.innerHTML = heart;
                    // 血条归零，游戏结束，玩家2获胜
                    if(lifeOfPlayer1 == 0)
                    {
                        lifeOfP1.innerHTML = "";
                        clearInterval(running);
                        alert("Game Over. Player2 Win!!!");
                        document.location.reload();
                    }
                    // 血条还未归零，球继续反弹
                    this.dx = -this.dx;
                }
            }
            
        }

        // 变速
        this.changeSpeed = function() {
            
            if(this.dx > 0)
            {
                this.dx += 0.1;
            }
            else
            {
                this.dx += -0.1;
            }
            if(this.dy > 0)
            {
                this.dy += 0.1;
            }
            else
            {
                this.dy += -0.1;
            }

        }

    }

    // 创建一个Paddle类（球挡板）
    function Paddle(x, y, width, height, paddleColor, upPressed, downPressed) {

        this.x = x;
        this.y = y;
        this.width = width;
        this.height = height;
        this.upPressed = upPressed;
        this.downPressed = downPressed;
        
        // 板子的绘制方法
        this.drawPaddle = function() {
            
            ctx.beginPath();
            ctx.rect(this.x, this.y, this.width, this.height);
            ctx.fillStyle = randomColor();
            ctx.fill();
            ctx.closePath();

        }

        // 球板控制移动方法
        this.control = function() {
            
            // 左移
            if(this.upPressed && this.y > 0)
            {
                this.y -= 7;
            }
            // 右移
            if(this.downPressed && this.y < canvas.height - this.height)
            {
                this.y += 7;
            }

            // 移动完毕之后将press状态重置
            this.upPressed = false;
            this.downPressed = false;
        }

    }

    // 创建一个球的实例
    var ball = new Ball(canvas.width / 2, canvas.height - 30, 2, -2, 10);
    // 统一两个板子的宽度和高度
    var paddleWidth = 10;
    var paddleHeight = 75;
    // 创建玩家1的球板实例
    var paddle1 = new Paddle(0, (canvas.height - paddleHeight) / 2, paddleWidth, paddleHeight, "red", false, false);
    // 创建玩家2的球板实例
    var paddle2 = new Paddle(canvas.width - paddleWidth, (canvas.height - paddleHeight) / 2, paddleWidth, paddleHeight, "blue", false, false);

    /*
        键盘操作
    */

    var W = false;
    var S = false;
    var ArrowUp = false;
    var ArrowDown = false;
    // 绑定键盘事件
    document.addEventListener('keydown', keyDownHandler1);
    document.addEventListener('keyup', keyUpHandler1);
    document.addEventListener('keydown', keyDownHandler2);
    document.addEventListener('keyup', keyUpHandler2);
    
    function keyDownHandler1(e) {
        
        // 玩家1上键
        if(e.key == 'W' || e.key == 'w')
        {
            W = true;
        }
        // 玩家1下键
        if(e.key == 'S' || e.key == 's')
        {
            S = true;
        }

    }

    function keyUpHandler1(e) {
        
        // 玩家1左键
        if(e.key == 'W' || e.key == 'w')
        {
            W = false;
        }
        // 玩家1右键
        if(e.key == 'S' || e.key == 's')
        {
            S = false;
        }

    }

    function keyDownHandler2(e) {

        // 玩家2上键
        if(e.key == 'ArrowUp')
        {
            ArrowUp = true;
        }
        // 玩家2下键
        if(e.key == 'ArrowDown')
        {
            ArrowDown = true;
        }

    }

    function keyUpHandler2(e) {

        // 玩家2左键
        if(e.key == 'ArrowUp')
        {
            ArrowUp = false;
        }
        // 玩家2右键
        if(e.key == 'ArrowDown')
        {
            ArrowDown = false;
        }

    }

    function draw() {

        // 先清除上一帧画面
        ctx.clearRect(0, 0, canvas.width, canvas.height);  
        // 把球绘制出来
        ball.drawBall();
        // 球的碰撞检测
        ball.collision();
        // 绘制球板
        paddle1.drawPaddle();
        paddle2.drawPaddle();
        // 球的位移（下一帧画面，球的位置）
        ball.x += ball.dx;
        ball.y += ball.dy;
        // 控制球板移动
        if(W)
        {
            paddle1.upPressed = true;
        }
        if(S)
        {
            paddle1.downPressed = true;
        }
        if(ArrowUp)
        {
            paddle2.upPressed = true;
        }
        if(ArrowDown)
        {
            paddle2.downPressed = true;
        }
        paddle1.control();
        paddle2.control();

    }

    
    var running;

    // 开始游戏并选择游戏模式
    startbtn.addEventListener('click', function() {
        
        startbtn.style.display = 'none';
        selectMode.style.display = 'block';

        // 如果选择了普通模式
        normalMode.addEventListener('click', function() {

            selectMode.style.display = 'none';
            // 游戏开始
            gameUI.style.display = 'block';
            // 创建一个定时器，每10ms调用一次draw函数，重绘游戏界面，因为时间间隔非常短，所以看起来就像连续运动
            running = setInterval(draw, 10);     

        });

        // 如果选择了变速模式
        speedMode.addEventListener('click', function() {

            selectMode.style.display = 'none';
            // 开启变速
            change = true;
            // 游戏开始
            gameUI.style.display = 'block';
            // 创建一个定时器，每10ms调用一次draw函数，重绘游戏界面，因为时间间隔非常短，所以看起来就像连续运动
            running = setInterval(draw, 10);   

        });
        
    });

}